<template>
  <div id="OutStorageReviewFuhe">
    <h1>出库单(审核)</h1>
    <el-form :model="StorageInview" >
      <div style="text-align: right">
        <el-button type="danger" round  icon="el-icon-close" size="small" @click="NoFuheReview">拒绝请求</el-button>
        <el-button type="success" round icon="el-icon-check" size="small" @click="YesFuheReview">通过请求</el-button>
        <el-button  round icon="el-icon-back" size="small"@click="showAddDialog">返回</el-button>
      </div>
      <br><br>

      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple">
          <el-form-item label="出库编号:" :label-width="formLabelWidth">
            <el-input v-model="StorageInview.payOrderNumber"  autocomplete="off" readonly class="el-input__inner"></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="6" :offset="2"><div class="grid-content bg-purple">
          <el-form-item label="总数量:" :label-width="formLabelWidth" id="input1">
            <el-input v-model="StorageInview.totalAmount"  autocomplete="off" readonly class="el-input__inner"></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="6" :offset="2"><div class="grid-content bg-purple">
          <el-form-item label="总价格:" :label-width="formLabelWidth" id="input1">
            <el-input v-model="StorageInview.totalPrice"  autocomplete="off" readonly class="el-input__inner"></el-input>
          </el-form-item>
        </div></el-col>
      </el-row>
      <el-row :gutter="20" id="row1">
<!--        <el-col :span="6"><div class="grid-content bg-purple">-->
<!--          <el-form-item label="入库仓库:" :label-width="formLabelWidth">-->
<!--            <el-input v-model="StorageInview.warehouseId"  autocomplete="off" readonly class="el-input__inner"></el-input>-->
<!--          </el-form-item>-->
<!--        </div></el-col>-->
        <el-col :span="6"><div class="grid-content bg-purple">
          <el-form-item label="申请人:" :label-width="formLabelWidth" id="input1">
            <el-input v-model="StorageInview.register"  autocomplete="off" readonly class="el-input__inner"></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="6" :offset="2"><div class="grid-content bg-purple">
          <el-form-item label="申请时间:" :label-width="formLabelWidth" id="input1">
            <el-input v-model="StorageInview.registerTime"  autocomplete="off" readonly class="el-input__inner"></el-input>
          </el-form-item>
        </div></el-col>
      </el-row>

      <el-table :data="InStorageFuheAry" style="width: 100%">
        <el-table-column prop="outboundDetailId" label="序号" >
        </el-table-column>
        <el-table-column prop="imgLink" label="图片" >
          <template slot-scope="scope">
            <el-avatar :size="45" shape="squear"  :src="scope.row.imgLink" @error="errorHandler">
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" >
        </el-table-column>
        <el-table-column prop="warehouseName" label="出货仓库" >
        </el-table-column>
<!--        <el-table-column prop="companyName" label="商品供应商"width="200">-->
<!--        </el-table-column>-->
        <el-table-column prop="price" label="单价(元)">
        </el-table-column>
        <el-table-column prop="amount" label="数量(件)">
        </el-table-column>
        <el-table-column prop="subtotal" label="小计(元)" >
        </el-table-column>
      </el-table>

      <div class="div1">
        <hr>
        <el-row :gutter="20" id="row1">
          <el-col :span="6" :offset="1"><div class="grid-content bg-purple">
            <el-form-item label="审核人:" :label-width="formLabelWidth">
              <el-input v-model="StorageInview.checker"  autocomplete="off"  class="el-input__inner"></el-input>
            </el-form-item>
          </div></el-col>
<!--          <el-col :span="6" :offset="6"><div class="grid-content bg-purple">-->
<!--            <el-form-item label="审核时间:" :label-width="formLabelWidth" id="input1">-->
<!--              <el-input v-model="StorageInview.checkTime"  autocomplete="off"  class="el-input__inner"></el-input>-->
<!--            </el-form-item>-->
<!--          </div></el-col>-->
        </el-row>
        <el-row :gutter="20" id="row1">
          <el-col :span="6" :offset="1"><div class="grid-content bg-purple">
            <el-form-item label="审核理由:" :label-width="formLabelWidth">
              <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="StorageInview.checkReason"
                  maxlength="50"
                  show-word-limit
                  style="width: 1000px"
              >
              </el-input>
            </el-form-item>
          </div></el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "OutStorageReviewFuhe",
  data(){
    return{
      //表格数组
      InStorageFuheAry:[],
      //表单对象
      StorageInview:{},
      InStorageList:{},
      formLabelWidth:'120px',
    }
  },
  methods:{
    //返回按钮
    showAddDialog(){
      this.$router.push("/outStorageReview")
    },
    //出库同意请求
    async YesFuheReview(){
      this.InStorageList.outboundDetails=this.InStorageFuheAry
      this.InStorageList.outbound=this.StorageInview
      console.log("122",this.InStorageList)
      const {data: res} = await this.$http.post(`/outbound/YesFuheReviewList/`,this.InStorageList)
      this.$router.push("/outStorageReview")
      //消息提示
      this.$message({
        showClose: true,
        message: '复核成功',
        type: 'success'
      });
    },
    //出库拒绝请求
    async NoFuheReview(){
      const {data: res} = await this.$http.post(`/outbound/NoFuheReviewList/`,this.StorageInview)
      this.$router.push("/outStorageReview")
      //消息提示
      this.$message({
        showClose: true,
        message: '操作成功',
        type: 'success'
      });
    },
    //表格数据请求
    async InStoragePage(){
      //从页面取回id
      let payId=localStorage.getItem("payId")
      console.log(payId)
      const {data: res} = await this.$http.post(`/outboundDetail/OutStorageDetailList/${payId}`)
      console.log("3232",res)
      this.InStorageFuheAry=res.list
      this.total =res.total
    },
    //回显表单数据
    async InStorageFuheList(){
      //从页面取回id
      let payId=localStorage.getItem("payId")
      console.log('1212',payId)
      const {data: res} = await this.$http.post(`/outbound/OutStorageReviewListByid/${payId}`)
      this.StorageInview=res
    },
  },
  created() {
    this.InStorageFuheList()
    this.InStoragePage()
  }
}
</script>

<style scoped>
h1{
  text-align: center;
}
.el-input__inner {
  border: none !important; /* 去除边框 */
  box-shadow: none !important; /* 去除阴影 */
  width: 230px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
/*.div1{*/
/*  width: 1400px;*/
/*  position: absolute;*/
/*  top: 560px;*/
/*  left: 200px;*/
/*}*/
/*#formdiv{*/
/*  position: absolute;*/
/*  top: 210px;*/
/*  left: 300px;*/

/*}*/
</style>